<template>
  <el-carousel :interval="2000" type="card" height="700px">
    <el-carousel-item v-for="item in picUrl" :key="item" label="正义的伙伴">
      <el-image 
        style="width: 100%; height: 100%"
        :src="item"
        title="正义的伙伴"
        :preview-src-list="picUrl"/>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import {usedBanner} from '../../api/index.js';
export default {
    name:'basetable',
    data(){
        return{
            query:{
                pageIndex:1,
                pageSize:5
            },
            picUrl:[]
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            usedBanner(this.query).then(res => {
                for(var i = 0; i < res.t.length; i++){
                    this.picUrl.push(res.t[i].picture);
                }
                console.log(this.picUrl);
            })
        }
    }
}
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>